import { useState } from 'react';
import { EyeOutlined } from '@ant-design/icons';
import '../../assets/Slide/Slide.scss'

function Slide(props: any) {
    let url = props.SlideList.url
    const [hoverDistance, setHoverDistance] = useState(0);
    // 定义最大移动距离
    const maxDistance = 185
    // 定义handleMouseMove函数，处理滑动事件
    const handleMouseMove = (e: any) => {
        // 计算当前滑动距离与最大距离的最小值
        const num = Math.min(e.nativeEvent.offsetX, maxDistance)
        // 根据滑动距离计算图片索引（偏移量除以每张图片的平均宽度）
        const distance = Math.floor(num / (maxDistance / url.length))
        // 根据计算得到的索引值更新carouselpicture状态变量
        if (distance < 0) {
            // 如果计算得到的索引小于0，则显示第一张图片
            setHoverDistance(0)
        } else if (distance >= url.length) {
            // 如果计算得到的索引大于等于图片数量，则显示最后一张图片
            setHoverDistance(url.length - 1);
        } else {
            // 否则显示计算得到的索引对应的图片
            setHoverDistance(distance)
        }
    }
    return (
        <div className='slideImg' onMouseMove={handleMouseMove}>
            <div className="slideImg_img">
                <img src={url[hoverDistance]} alt="图片飞走了" />
            </div>
            <progress id='progressBar' value={hoverDistance} max={url.length - 1}></progress>
            <div className='pagination'>{hoverDistance + 1}/{url.length}</div>
            <div className='SlideImg_Info'>
                <p>{props.SlideList.title}</p>
                <div className='SlideImg_user'>
                    <div className="SlideImg_info_user">
                        <img src={props.SlideList.avatar} alt="" />
                        <span>{props.SlideList.name}</span>
                    </div>
                    <span><EyeOutlined />{props.SlideList.num}</span>
                </div>
            </div>
            <div className='slideImg_type'>{props.SlideList.type}</div>
        </div>
    )
}

export default Slide
